<template>
  <view class="content">
    <div class="lean-bg-public">
      <view class="title">
        <view class="u-back-wrap" @tap="goBack">
          <view class="u-icon-wrap">
            <u-icon name="nav-back" color="#606266" size="44"></u-icon>
          </view>
        </view>
        <span>发布评价</span>
      </view>
    </div>
    <!-- 遍历出评价商品 -->
    <view>
      <view class="after-sales-goods-detail-view">
        <view>
          <view class="goods-item-view">
            <view class="goods-img">
              <u-image
                border-radius="16"
                width="180rpx"
                height="180rpx"
                :src="sku.image"
              />
            </view>
            <view class="goods-info">
              <view class="goods-title u-line-2">{{ sku.name }}</view>
              <view class="goods-price">
                <view>￥{{ sku.goodsPrice }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="info-evaluate-view">
        <view class="goods-evaluate-view">
          <view class="goods-view">
            <view>综合评分</view>
          </view>
          <view class="rate-view">
            <view class="rate-btn" @click="onGrade('GOOD')">
              <u-image
                width="36rpx"
                height="36rpx"
                :src="
                  form.grade === 'GOOD'
                    ? '/static/img/rate_a_r.png'
                    : '/static/img/rate_a.png'
                "
              />
              <text :style="{ color: form.grade === 'GOOD' ? '#009968' : '' }"
                >好评</text
              >
            </view>
            <view class="rate-btn" @click="onGrade('MODERATE')">
              <u-image
                width="36rpx"
                height="36rpx"
                :src="
                  form.grade === 'MODERATE'
                    ? '/static/img/rate_b_r.png'
                    : '/static/img/rate_b.png'
                "
              />
              <text>中评</text>
            </view>
            <view class="rate-btn" @click="onGrade('WORSE')">
              <u-image
                width="36rpx"
                height="36rpx"
                :src="
                  form.grade === 'WORSE'
                    ? '/static/img/rate_c_r.png'
                    : '/static/img/rate_c.png'
                "
              />
              <text>差评</text>
            </view>
          </view>
        </view>
        <view class="seller-rate-view">
          <view class="rate-title">描述相符</view>
          <view>
            <u-rate
              count="count"
              gutter="40"
              active-color="#009968"
              v-model="form.descriptionScore"
              :size="48"
            >
            </u-rate>
          </view>
        </view>
        <view class="seller-rate-view">
          <view class="rate-title">服务态度</view>
          <view>
            <u-rate
              count="count"
              gutter="40"
              active-color="#009968"
              v-model="form.serviceScore"
              :size="48"
            ></u-rate>
          </view>
        </view>
        <view class="seller-rate-view">
          <view class="rate-title">物流服务</view>
          <view>
            <u-rate
              count="count"
              gutter="40"
              active-color="#009968"
              v-model="form.deliveryScore"
              :size="48"
            ></u-rate>
          </view>
        </view>
      </view>
      <view class="info-evaluate-view">
        <view class="input-header">补充描述<span>选填</span></view>
        <view class="input-view">
          <u-input
            v-model="form.content"
            height="200"
            placeholder-style="font-size:12px;color:#CCCCCC"
            :type="type"
            :border="border"
            :maxlength="maxlength"
            :placeholder="placeholder"
          />
          <view class="input-num">
            <text>{{ form.content.length }}/{{ maxlength }}</text>
          </view>
        </view>
        <view class="images-view">
          <u-upload
            :header="{ accessToken: storage.getAccessToken() }"
            :action="action"
            width="148"
            @on-uploaded="onUploaded"
            :max-count="5"
            :show-progress="false"
          ></u-upload>
        </view>
      </view>
    </view>
    <view class="long-btn" @click="onSubmit">提交</view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
import { commentsMemberOrder } from "@/api/members.js";
import { upload } from "@/api/common.js";
import views from "../../tabbar/home/views.vue";

export default {
  components: { views },
  data() {
    return {
      storage,
      type: "textarea", //输入框状态为 textarea
      border: false, //没有border
      maxlength: 200, //评价最大字数为500字
      placeholder: "您的评价可以帮助更多人",
      sku: {}, //订单信息
      form: {
        content: "", //评价详情
        goodsId: "", //商品id
        grade: "GOOD", //默认为好评
        orderItemSn: "", //商品的sn
        skuId: "", //商品skuId
        descriptionScore: 5, //默认描述得分为5分
        serviceScore: 5, //默认服务得分为5分
        deliveryScore: 5, //默认物流得分为5分
      },
      action: upload, //图片上传地址
    };
  },
  onLoad(options) {
    // 获取上一级传过来的数据进行解析
    this.form.orderItemSn = options.sn;
    this.sku = JSON.parse(decodeURIComponent(options.sku));
    this.form.goodsId = this.sku.goodsId;
    this.form.skuId = this.sku.skuId;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    /**
     * 点击评价
     */
    onGrade(grade) {
      this.form.grade = grade;
    },

    /**
     * 提交评价
     */
    onSubmit() {
      uni.showLoading({
        title: "加载中",
      });
      commentsMemberOrder(this.form).then((res) => {
        if (this.$store.state.isShowToast) {
          uni.hideLoading();
        }
        if (res.data.success) {
          uni.showToast({
            title: "发布评价成功",
            duration: 2000,
            icon: "none",
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 500);
            },
          });
        }
      });
    },

    /**
     * 图片成功后回调
     */
    onUploaded(lists) {
      let images = [];
      lists.forEach((item) => {
        images.push(item.response.result);
      });
      this.form.images = images;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../uni.scss";
page,
.content {
  background: #fafafa;
  height: 100%;
  margin-bottom: 100rpx;
}
.content {
  padding: 16rpx;
  background: #fafafa;
}
.onSubmit {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  background: $aider-light-color;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 100px;
}
.after-sales-goods-detail-view {
  padding: 24rpx;
  margin-top: 88rpx;
  height: 228rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 20rpx;
    .header-text {
      background-color: #f4f4f5;
      padding: 10rpx 30rpx;
      border-radius: 50rpx;
      .seller-name {
        color: $main-color;
        font-weight: 600;
      }
    }
  }
  .goods-item-view {
    display: flex;
    flex-direction: row;
    .goods-info {
      padding-left: 24rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-title {
        max-width: 466rpx;
        margin-bottom: 16rpx;
        color: #212121;
      }
      .goods-specs {
        font-size: 24rpx;
        margin-bottom: 10rpx;
        color: #cccccc;
      }
      .goods-price {
        font-size: 28rpx;
        color: #212121;
      }
    }
    .goods-num {
      width: 60rpx;
      color: $main-color;
    }
  }
  .after-num {
    margin: 0rpx 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
  }
}
.goods-evaluate-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 40rpx;
  .goods-view {
    width: 138rpx;
    font-size: 28rpx;
    color: #212121;
  }
  .rate-view {
    color: #c4c4c4;
    display: flex;
    flex-direction: row;
    align-items: center;
    .rate-btn {
      margin-right: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text {
        margin-left: 12rpx;
      }
    }
    :last-child {
      margin-right: 0;
    }
  }
}
.info-evaluate-view {
  align-items: center;
  font-size: 28rpx;
  margin-top: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
  background-color: #fff;
  border-radius: 16rpx;
  .input-header {
    margin-bottom: 24rpx;
    span {
      color: #9e9e9e;
      font-size: 24rpx;
      margin-left: 8rpx;
    }
  }
  .input-view {
    width: 100%;
    background: #fafafa;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 58rpx;
  }
  .input-num {
    color: #cccccc;
    text-align: right;
  }
  .images-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .info-header {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 30rpx;
  }
  .seller-rate-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 40rpx;
    .rate-title {
      line-height: 48rpx;
      width: 138rpx;
    }
  }
  .seller-rate-view:last-child {
    margin-bottom: 0;
  }
}

.submit-view {
  position: fixed;
  z-index: 999;
  bottom: 0px;
  left: 0px;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  height: 100rpx;
  width: 750rpx;
  align-items: center;
  padding: 0rpx 20rpx;
}
</style>
